<template>
  <div
    :style="{backgroundImage: `url(${imageUrl}/img/bg_ps.png)`}"
    class="course-finish"
    v-if="loading"
  >
    <nav-bar background="none" class="nav-bar-position"/>
    <white-space/>

    <div class="content">
      <my-img class-name="background" src="ft.png"/>

      <p class="con">
        恭喜你完成{{ titles[current].title }}环节~
      </p>

      <div class="beans">
        <!--   all-$error-bean-$right     -->
        <my-img
          :key="index"
          :src="'all-'+ titles[current].count +'-bean-'+ titles[current].progress+'.gif'"
          class-name="ico-beans"
          v-if="parseInt(type_id) === 3"/>
        <my-img
          :key="index"
          :src="'all-'+titles[current].count+'-bean-' +titles[current].count +'.gif'"
          class-name="ico-beans"
          v-else/>
      </div>


      <!--      <my-button @tap="NavigateBack">继续</my-button>-->
      <my-button @tap="_NavigateTo">继续</my-button>

      <my-button
        :margin-top="30"
        @tap="RedirectTo({
                    url:titles[current].path,
                    query:{id,type_id}
                  })"
        class-name="again">再学一次
      </my-button>

    </div>

    <loading/>

  </div>
</template>

<script>
  import { imageUrl, soundList } from "../../api/url.config";
  import { NavigateBack, RedirectTo } from "../../utils/router";
  import { mapActions, mapState } from 'vuex'


  export default {
    name: "course_finish",
    data() {
      return {
        imageUrl,
        showCount: 0,
        current: 0,
        count: 0,
        id: 0,
        type_id: 0,
        titles: [],
        loading:false,
      }
    },
    computed: mapState('Course', ['lessonDetail', 'lessonList']),

    methods: {
      ...mapActions('Tools', ['playCourseFinishVoice', 'setVoicePath', 'playVoice', 'showLoading', 'hideLoading','stopPlay']),
      ...mapActions('Course', ['reqLessonList']),
      NavigateBack,
      RedirectTo,
      async _NavigateTo() {
        const { id, setVoicePath, playVoice, titles, current } = this;
        const { path, type_id } = titles[current + 1] || { path: '', type_id: 0 };
        setVoicePath({ voicePath: soundList.click });
        playVoice();
        if (path) {
          return this.RedirectTo({
            url: path,
            query: { type_id, id }
          })
        }
        this.NavigateBack()
      }
    },
    async onLoad(query) {
      this.stopPlay();

      const { id, type_id, count } = query;
      console.log(id, type_id, count);
      this.type_id = type_id;
      this.id = id;
      this.count = count;
      // this.showLoading();
      this.loading = false;
      await this.reqLessonList({ id });
      this.loading = true;
      // this.hideLoading();
      this.titles = this.lessonList.lessons;
      this.current = this.titles.findIndex(({ type_id }) => type_id === parseInt(this.type_id));
      this.playCourseFinishVoice({ voicePath: soundList.courseFinish })
    },
  }
</script>

<style lang="scss">
  @import "../../uni";

  .course-finish {
    @include bg;
    min-height: 100vh;
    background: {
      size: 100% 100%;
    };

    .content {
      width: upx(590);
      padding-bottom: upx(40);
      background: #fff;
      border-radius: upx(32);
      box-shadow: 0 upx(12) upx(40) 0 rgba(1, 160, 152, 0.54);
      text-align: center;
      margin: upx(328) auto;
    }

    .background {
      margin: upx(-150) auto 0;
      width: upx(480);
      height: upx(306);
    }

    .con {
      @include ft(36, #5D6473, 500);
      margin: upx(40) 0 0;
    }

    .beans {
      margin: upx(20) auto;
      background: white;
      overflow: hidden;

      .ico-beans {
        width: upx(600);
        height: upx(250);
      }

    }

    .again{
      background: #fff !important;
      color: $theme-yellow !important;
      box-shadow: none !important;
      border: upx(2) solid $theme-yellow !important;
      box-sizing: border-box !important;
    }


  }
</style>
